<template>
  <div class="pickers">
      <!--<van-cell :title="name !== '' ? name : '请选择医院'" icon="down" arrow-direction="down" @click="show=true"/>-->
      
      <van-button type="default" class="btn" icon="arrow-down" round block size="small" plain :text="name !== '' ? name : '请选择医院'" @click="show=true"></van-button>
      <van-popup v-model="show" position="bottom" :overlay="true" closeable round @close="chooseClose" @open="chooseOpen"
          :style="{ height: '90%' }" @confirm="show=false" @cancel="show = false" >
            <van-index-bar class="indexBar"  :sticky="false" highlight-color="#fb6463" >
              <van-index-anchor v-for="(item,index) in hospitals" :key="index" :index="index">
                <span class="indexWord">{{index}}</span>
                <van-cell @click="chooseName(citem)" v-for="(citem,cindex) in item" :key="cindex"  :title="citem.name"/>
              </van-index-anchor>
            </van-index-bar>
      </van-popup>
  </div>
</template>

<script>
import pinyin from 'js-pinyin'
import hotel from "@/modules/freestay/api/hotel";
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      FirstPin: ["A", "B", "C", "D", "E", "F", "G", "H", "J", "K", "L", "M", "N", "P", "Q", "R", "S", "T", "W", "X", "Y", "Z"],
      firstName: {},
      name: '',
      show: false,
      choosed: false,
    };
  },
  computed : {
    ...mapGetters ({
      hospitals: 'common/hospitalsFilterByArea'
    }),
  },
  created () {
    this.$store.dispatch('common/getHospitals')
  },
  mounted() {
    //this.getLists();
  },
  methods: {
    chooseClose() {
        if(this.choosed==false) {
          this.show = false;
          this.name = '请选择';
          this.$store.dispatch('common/changeHospitalValue',0)
        }
    },
    chooseOpen() {
        this.choosed = false;
    },
    chooseName(value) {
        this.choosed = true;
        this.show = false;
        this.name = value.name;
        this.$store.dispatch('common/changeHospitalValue',value.id)
    },
    getLists() {
      hotel.getHospitalIndexBars(
        (data) => {
          this.handleList(data);
        },
        (err) => {console.log(err)}
      );      
    },
    // 后台已经分好组,这里只是组合一下
    handleList(data) {
      let list = data.list;
      list.forEach(item=>{
        this.firstName[item.abbr] = [];
        let names = item.names.split(',')
        let ids = item.ids.split(',')
        names.forEach((name,index)=>{
          this.firstName[item.abbr].push({name:name,id:ids[index]})
        })
      })
    },
    //根据原始数据处理，比较慢
    handleListOri(nameList) {
      this.FirstPin.forEach((item)=>{
          this.firstName[item] = [];
          nameList.forEach((el)=>{
              let first = pinyin.getFullChars(el.name).substring(0,1);
              if( first == item ){
                this.firstName[item].push(el.name)
              }       
          })
      })
    },
  },
};
</script>
<style scoped>
.van-button__text {
  max-width: 10em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.van-button {
    margin-left: 5px;
}
.van-cell__text {
  max-width: 10em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.van-cell {
    margin-left: 5px;
}
</style>